<template>
	<view class="work-container">
		<ul class="ul">
			<li class="li">
				<view class="title">{{ $t('control:surveillanceName') }}</view>
				<view class="tit">{{ monitorName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('control:surveillanceType') }}</view>
				<view class="tit">{{ monitorTypeFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:alarmLevel') }}</view>
				<view class="tit">{{ monitorLevelIdFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('control:surveillanceStatus') }}</view>
				<view class="tit">{{ monitorStatusFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('control:surveillanceThreshold') }}</view>
				<view class="tit">{{ alarmThreshold | toPercent() }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('control:surveillanceCycle') }}</view>
				<text class="tit" v-if="monitorTimeType == 0">{{ $t('warn:permanent') }}</text>
				<text class="tit" v-else>{{ monitorTimeB | formatDate() }}~{{ monitorTimeE | formatDate() }}</text>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:faceLibrary') }}</view>
				<view class="tit">{{ groupName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('control:surveillanceDevice') }}</view>
				<view class="tit">{{ deviceName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:remark') }}</view>
				<view class="tit">{{ remark }}</view>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	data() {
		return {
			monitorName: '',
			monitorType: '',
			monitorLevelId: '',
			monitorStatus: '',
			alarmThreshold: '',
			monitorTimeType: '',
			remark: '',
			groupName: '',
			name: '',
			monitorTimeB: '',
			monitorTimeE: '',
			deviceName: '',
		}
	},
	computed: {
		monitorTypeFormat() {
			const str = this.monitorType,
				sexEnum = {
					"1": this.$t('control:blacklist'),
					"2": this.$t('control:stranger'),
					"6": this.$t('control:imageSurveillance'),
				}
			return sexEnum[str] || '--'
		},
		monitorLevelIdFormat() {
			const str = this.monitorLevelId,
				sexEnum = {
					"1": this.$t('control:level1Alarm'),
					"2": this.$t('control:level2Alarm'),
					"3": this.$t('control:level3Alarm'),
					"4": this.$t('control:level4Alarm'),
					"5": this.$t('control:level5Alarm')
				}
			return sexEnum[str] || '--'
		},
		monitorStatusFormat() {
			const str = this.monitorStatus,
				sexEnum = {
					"1": this.$t('control:enable'),
					"2": this.$t('control:disable'),
					"3": this.$t('control:surveillanceExpiry'),
					"4": this.$t('control:deleted')
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		this.setDetail(JSON.parse(option.data))
	},
	methods: {
		setDetail(data) {
			this.monitorName = data.monitorName
			this.monitorType = data.monitorType
			this.monitorLevelId = data.monitorLevelId
			this.monitorStatus = data.monitorStatus
			this.alarmThreshold = data.alarmThreshold
			this.monitorTimeB = data.monitorTimeB
			this.monitorTimeE = data.monitorTimeE
			this.monitorTimeType = data.monitorTimeType
			this.remark = data.remark ? data.remark : this.$t('search:none')
			this.groupName = data?.groups?.length > 0 ? data.groups.map(item => item.facegroupName).join('、') : this.$t('search:none')
			this.deviceName = data?.devices?.length > 0 ? data.devices.map(item => item.deviceName).join('、') : this.$t('search:none')
		}
	},
	filters: {
		toPercent: function (point) {
			var str = Number(point * 100).toFixed();
			return str;
		},
		// 时间戳处理
		formatDate: function (num) {
			let date = new Date(num);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d; //天补0
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
	}
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
	width: 70%;
}
</style>